<template>
  <div id="app" :class="{ dark: isDark }">
    <!-- 根据路由meta决定是否显示布局 -->
    <layout v-if="!isExternalPage" />
    
    <!-- 外链页面直接显示内容，占满全屏 -->
    <div v-else class="external-page w-screen h-screen overflow-hidden">
      <RouterView />
    </div>
    
    <!-- 只在非外链页面显示Toast和Dialog -->
    <template v-if="!isExternalPage">
      <Toast />
      <ConfirmDialog />
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useDark } from '@vueuse/core'
import layout from '@/components/layout/layout.vue'

const route = useRoute()
const isDark = useDark()

// 检查当前路由是否为外链页面
const isExternalPage = computed(() => {
  // 通过路由meta或查询参数判断是否为外链页面
  return route.meta?.external === true || 
         route.meta?.layout === 'blank' || 
         route.query?.external === 'true' ||
         route.query?.mode === 'external'
})
</script>
<style>

/* 外链页面样式 */
.external-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #000;
}

/* 确保外链页面内容占满全屏 */
.external-page > * {
  width: 100%;
  height: 100%;
}

/* 重置外链页面的默认样式 */
.external-page * {
  box-sizing: border-box;
}
</style>